<template>
    <div>
                <ul> 
                        <li v-for="item in navlist" :key="item.title">
                        <span class="iconfont img-icon" v-html="item.icons" v-bind:class="[item.icon1Class, item.icon2Class,item.icon3Class,
                        item.icon4Class, item.icon5Class,item.icon6Class,item.icon7Class, item.icon8Class,item.icon9Class,item.icon10Class]"></span>
                        <span class="title">{{item.title}}</span>
                        </li>
                </ul>
    </div>
</template>

<script>
export default {
    name:"HomeNav",
    data (){
        return{
          navlist:[
              {
               icons:'&#xe61e;',                   
               title:'美食',
               icon1Class:'icon1'
              },{
               icons:'&#xe66c;',
               title:'猫眼电影',
               icon2Class:'icon2'
              },{
               icons:'&#xe62c;',
               title:'酒店住宿',
               icon3Class:'icon3'
              },{
               icons:'&#xe655;',
               title:'休闲娱乐',
               icon4Class:'icon4'
              },{
               icons:'&#xe82e;',
               title:'外卖',
               icon5Class:'icon5'
              },{
               icons:'&#xe678;',
               title:'KTV',
               icon6Class:'icon6'
              },{
               icons:'&#xe600;',
               title:'丽人/美发',
               icon7Class:'icon7'
              },{
               icons:'&#xe6f7;',
               title:'景点门票',
               icon8Class:'icon8'
              },{
               icons:'&#xe685;',
               title:'火车票',
               icon9Class:'icon9'
              },{
               icons:'&#xe605;',
               title:'摩拜单车',
               icon10Class:'icon10'
              }
          ]
        }
    }
}
</script>

<style scoped>
 ul{
     display:flex;
     justify-content: space-between;
     width:100%;
     flex-wrap: wrap;
     padding:4px;
     box-sizing: border-box;
 }
 ul li{
     width:19%;
     height:65px; 
     display:flex;
     flex-direction: column; 
     margin:2px 0px;

 }
 .img-icon{
   font-size:40px;
   text-align: center;
 }
.icon1 {
    color:#FE7D21;
    font-size:45px;
    margin-top:-2%;
    margin-bottom:-6px;
}
.icon2 {
    color:white;
    background-color:#F94C43;
   
}
.icon3{
    font-size:40px;
    color:#6BDB73;
    background: #FFE100;
}
.icon4{
    font-size:30px;
    color:white;
    background: #0CCBAE;
}
.icon5{
    font-size:30px;
    color:white;
    background:#FDAC00 ;
}
.icon6{
    font-size:30px;
    color:white;
    background:#22CFB5;
}
.icon7{
    font-size:25px;
    background:#FE4F68;
}
.icon8{
    font-size:38px;
    color:#73D328;
    background:white;
}
.icon9{
    font-size:30px;
    color:#4F46A3;
    background:#5FCEFF;
}
.icon10{
    font-size:42px;
    color:white;
    background:#FE7B47;
    
}
.icon2,.icon3,.icon4,.icon5,.icon6,.icon7,.icon8,.icon9,.icon10{
    margin-top:5%;
    margin-left:19%;
    width: 38px;
    height:38px;
    line-height: 38px;
    border-radius: 50% ;
  
}
 li .title{
     font-size:13px;
      text-align: center;
 }
</style>
